@use "sass:math";

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  font-size: 72px;
  font-weight: bold;
  background: url("https://via.placeholder.com/800x400") no-repeat center center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body {
  background-color: #13161f;
}
@function generate($n) {
  $shadow: "#{random(200)}vw #{random(200)}vh #fff";
  @for $i from 2 through $n {
    $shadow: #{$shadow}, #{random(200)}vw #{random(200)}vh #fff;
  }
  @return $shadow;
}

$duration: 400s;
$count: 1000;
@for $i from 1 through 5 {
  .layer#{$i} {
    $size: #{$i}px;
    $count: floor($count / $i);
    position: absolute;
    top: $size;
    left: $size;
    width: $size;
    height: $size;
    border-radius: 999px;
    box-shadow: generate($count);
    animation: move ($duration / $i) linear infinite;

    &::after {
      content: "";
      position: fixed;
      top: 100vh;
      left: 0;
      width: inherit;
      height: inherit;
      border-radius: 50%;
      box-shadow: inherit;
    }
  }
}

@keyframes move {
  100% {
    transform: translateY(-100vh);
  }
}
